<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Card, Form, Select, DatePicker, Button, message, Input, Avatar, Rate } from 'ant-design-vue';
import { getMakeupArtistPage, type MakeupArtistApi } from '#/api/wedding/makeupartist';
import { createMakeupServiceOrder } from '#/api/wedding/makeupserviceorder';

const formRef = ref();
const loading = ref(false);
const artists = ref<MakeupArtistApi.MakeupArtist[]>([]);
const formData = ref({
  artistCode: undefined,
  customerId: '',
  serviceTime: '',
  serviceAddress: '',
});

const loadArtists = async () => {
  loading.value = true;
  try {
    const result = await getMakeupArtistPage({ pageNo: 1, pageSize: 100 });
    artists.value = result.list || [];
  } finally {
    loading.value = false;
  }
};

const handleSubmit = async () => {
  await formRef.value?.validate();
  loading.value = true;
  try {
    await createMakeupServiceOrder(formData.value as any);
    message.success('预约成功');
    formRef.value?.resetFields();
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadArtists();
});
</script>

<template>
  <div>
    <div class="grid grid-cols-4 gap-4 mb-6">
      <Card 
        v-for="artist in artists" 
        :key="artist.id"
        hoverable
      >
        <div class="text-center">
          <Avatar :src="artist.avatar" :size="80" class="mb-2">
            {{ artist.artistName?.substring(0, 1) }}
          </Avatar>
          <div class="font-medium">{{ artist.artistName }}</div>
          <Rate :value="artist.rating" disabled class="text-xs my-1" />
          <div class="text-sm text-gray-500">从业{{ artist.workYears }}年</div>
          <div class="text-red-500 font-bold mt-2">¥{{ artist.servicePrice }}</div>
        </div>
      </Card>
    </div>

    <Card title="快速预约">
      <Form ref="formRef" :model="formData" layout="vertical">
        <Form.Item label="选择化妆师" name="artistCode" :rules="[{ required: true }]">
          <Select v-model:value="formData.artistCode" placeholder="请选择">
            <Select.Option v-for="artist in artists" :key="artist.artistCode" :value="artist.artistCode">
              {{ artist.artistName }}
            </Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="服务时间" name="serviceTime" :rules="[{ required: true }]">
          <DatePicker v-model:value="formData.serviceTime" show-time class="w-full" />
        </Form.Item>
        <Form.Item label="服务地址" name="serviceAddress" :rules="[{ required: true }]">
          <Input v-model:value="formData.serviceAddress" placeholder="请输入服务地址" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" @click="handleSubmit" :loading="loading">提交预约</Button>
        </Form.Item>
      </Form>
    </Card>
  </div>
</template>

